import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import VueAxios from "vue-axios";
import axios from "axios";

import {createRouter, createWebHashHistory} from "vue-router";

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import DemoOne from "./components/DemoOne.vue";
import DemoTwo from "./components/DemoTwo.vue";
import UserDemo from "./components/UserDemo.vue";
import WeatherDemo from "./components/WeatherDemo.vue";
import Friends from "./components/Friends.vue";
import UserSetting from "./components/UserSetting.vue";


const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(ElementPlus)
app.use(VueAxios, axios)

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/home/:username/:id(\\d+)",
            components: {
                topBar: UserDemo,
                main: UserSetting
            }
        },
        {
            path: "/", components: {
                demo1: DemoOne,
            }, name: "index"
        },
        {
            path: "/user/:username", component: UserDemo, name: "user1", children: [
                {
                    path: "friends/:count",
                    component: Friends
                },
                {
                    path: "demo1",
                    component: DemoOne
                }
            ]
        },
        {path: "/demo1", component: DemoOne, name: "demo1"},
        {path: "/demo2", component: DemoTwo, name: "demo2"},
        {path: "/user/:username/:id(\\d+)", component: UserDemo, name: "userDemo"},
    ]
})
app.use(router)
app.mount('#app')
